import React, { Component } from 'react';
import './index.less';
import { createPortal } from 'react-dom';

interface IImgItem {
  id: number;
  url: string;
}

interface ILongLoadingProps {
  imgList?: Array<IImgItem>;
  isLongLoadingShow: boolean;
  customStyleMask: object;
  wrapClassName?: string;
  style?: {};
  usePortal?: boolean;
  isShowMask?: boolean;
}
interface ILongLoadingState {
  isShow: boolean;
}

class LongLoading extends Component<ILongLoadingProps, ILongLoadingState> {
  constructor(props: ILongLoadingProps) {
    super(props);
    this.state = {
      isShow: true
    };
  }
  static defaultProps: ILongLoadingProps = {
    isShowMask: true,
    customStyleMask: {},
    isLongLoadingShow: false,
    usePortal: false,
    imgList: [
      {
        id: 1,
        url: require('../../assets/images/loading/1.svg')
      },
      {
        id: 2,
        url: require('../../assets/images/loading/2.svg')
      },
      {
        id: 3,
        url: require('../../assets/images/loading/3.svg')
      },
      {
        id: 4,
        url: require('../../assets/images/loading/4.svg')
      },
      {
        id: 5,
        url: require('../../assets/images/loading/5.svg')
      },
      {
        id: 6,
        url: require('../../assets/images/loading/6.svg')
      }
    ]
  };

  timer: any = null;

  componentDidMount() {
    this.initBoxStatus();
  }
  componentWillReceiveProps(nextProps: any) {
    if (nextProps.isLongLoadingShow === this.props.isLongLoadingShow) return;
    this.handleScroll(nextProps.isLongLoadingShow);
  }

  handleScroll(status: any) {
    const $body = document.body;
    const $html = document.getElementsByTagName('html')[0];
    status
      ? $body.classList.add('mask-open')
      : $body.classList.remove('mask-open');
    status
      ? $html.classList.add('mask-open')
      : $html.classList.remove('mask-open');
  }

  initBoxStatus() {
    const { imgList } = this.props;

    this.timer = setInterval(() => {
      this.setState(
        {
          isShow: false
        },
        () => {
          this.setState({
            isShow: true
          });
        }
      );
    }, (imgList as Array<any>).length * 3 * 1000); // 根据imgList的长度延迟刷新页面
  }

  componentWillUnmount() {
    clearInterval(this.timer);
    this.handleScroll(false);
  }

  render() {
    const {
      imgList,
      isLongLoadingShow,
      customStyleMask,
      usePortal,
      isShowMask = true,
      wrapClassName = ''
    } = this.props;
    const { isShow } = this.state;
    const content = isLongLoadingShow ? (
      <div>
        {isShowMask && <div className="mask" style={customStyleMask}></div>}
        <div className={`long-loading ${wrapClassName}`}>
          {isShow ? (
            <div className="box_loading">
              {(imgList as Array<any>).map(img => (
                <div style={{ width: '64px', height: '33px' }} key={img.id}>
                  <img alt="" className={'img' + img.id} src={img.url} />
                </div>
              ))}
            </div>
          ) : null}
          {this.props.children}
        </div>
      </div>
    ) : null;
    if (usePortal) {
      return createPortal(content, document.body);
    }
    return content;
  }
}
export default LongLoading;
